<template>
  <div>
    <div class="tab">
      <p class="fxiang">分享</p>
      <div class="minh"><img
          :src="imgs+list.val"
          alt=""
        ></div>
      <div
        class="bjian"
        @click="EditClick()"
      >添加/修改</div>
    </div>

    <div class="tab">
      <p class="fxiang">佣金</p>
      <div class="minh">
        <div class="yongjin"><span>一级佣金</span> <span style="color:red;">{{yongjinList.one}}%</span></div>
        <div class="yongjin"><span>二级佣金</span> <span style="color:red;">{{yongjinList.two}}%</span></div>
      </div>
      <div
        class="bjian"
        @click="yonG()"
      >添加/修改</div>
    </div>

    <div class="tab">
      <p class="fxiang">加盟</p>
      <div class="minh">
        <div class="yongssjin"><span>{{jmLisst.val}}</span></div>
      </div>
      <div
        class="bjian"
        @click="jiaMenggai()"
      >添加/修改</div>
    </div>

    <div class="tab">
      <p class="fxiang">其他默认值</p>
      <div class="minh">
        <div class="yongssjin"><span>{{defInfo.val}}</span></div>
      </div>
      <div
        class="bjian"
        @click="DefaultOpen()"
      >添加/修改</div>
    </div>

    <!-- 分享弹框 -->
    <el-dialog
      title="分享"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <div class="row">
          <el-upload
            list-type="picture-card"
            action="http://www.jfqiandai.com/img/upload"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            :on-success="onSuccessLogo"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>

      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="EditOk()"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 佣金编辑弹框 -->
    <el-dialog
      title="佣金"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <div class="bili">
        <div><input
            type="number"
            v-model="one"
            placeholder="请输入一级佣金比例"
          > <span>%</span></div>
        <div><input
            type="number"
            v-model="two"
            placeholder="请输入一级佣金比例"
          > <span>%</span></div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="isOk()"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 加盟电话编辑弹框 -->
    <el-dialog
      title="加盟"
      :visible.sync="dialogVisible2"
      width="30%"
    >
      <div class="bili">
        <div><input
            type="text"
            v-model="phone"
            placeholder="请输入电话号码"
          ></div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="jiOk()"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 其他默认值弹框 -->
    <el-dialog
      title="其他默认值"
      :visible.sync="dialogVisible3"
      width="30%"
    >
      <div class="bili">
        <div><input
            type="text"
            v-model="defaultOther"
            placeholder="请输入其他默认值"
          ></div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="defaultOk()"
        >确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      fileList1: [],
      logoUrl: "",
      imgs: "http://www.jfqiandai.com/file",
      one: "",
      two: "",
      phone: "",
      yongjinList: [],
      jmLisst: [],
      defInfo: {},
      defaultOther: ""
    };
  },
  created() {
    this.fenXiang();
    this.yongjin();
    this.jmList();
    this.getDefault();
  },
  methods: {
    //查询分享信息
    fenXiang() {
      let url = "/config/get/SHARE";
      let params = {
        key: "SHARE"
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.list = res.data;
        }
      });
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview1(file) {
      console.log(file);
    },
    onSuccessLogo(Response, file, fileList) {
      this.logoUrl = file.response.data.path;
    },
    //编辑
    EditClick(v) {
      this.dialogVisible = true;
    },

    inOk() {
      let url = "/config/put";
      let params = {
        key: "SHARE",
        val: this.logoUrl
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.list = res.data;
        }
      });
    },
    EditOk() {
      this.dialogVisible = false;
      this.inOk();
      this.fenXiang();
      window.location.reload();
    },

    //佣金比例获取
    yongjin() {
      let url = "/config/getCommission";
      this.httpGet(url, res => {
        if (res.code == 200) {
          this.yongjinList = res.data;
        }
      });
    },
    //佣金修改
    yonG() {
      this.dialogVisible1 = true;
    },
    isOk() {
      let self = this;
      if (!this.one || !this.two) {
        this.$message({
          message: "请输入一级/二级佣金比例",
          type: "warning"
        });
        return;
      }
      let url = "/config/editCommission";
      let params = {
        one: this.one,
        two: this.two
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          self.dialogVisible = false;
          self.$message({
            message: "操作成功",
            type: "success"
          });
          self.dialogVisible1 = false;
          self.one = "";
          self.two = "";
          self.yongjin();
        }
      });
    },

    //默认值
    getDefault() {
      let url = "/config/get/QTMR";
      this.httpPost(url, { key: "QTMR" }, res => {
        if (res.code == 200) {
          this.defInfo = res.data;
          console.log(this.defInfo);
        }
      });
    },
    DefaultOpen() {
      this.dialogVisible3 = true;
    },
    defaultOk() {
      let url = "/config/put";
      let params = {
        key: "QTMR",
        val: this.defaultOther
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.dialogVisible3 = false;
          this.getDefault();
        }
      });
    },
    //加盟
    jmList() {
      let url = "/config/get/JM";
      this.httpPost(url, { key: "JM" }, res => {
        if (res.code == 200) {
          this.jmLisst = res.data;
        }
      });
    },

    jiaMenggai() {
      this.dialogVisible2 = true;
    },
    jiOk() {
      let self = this;
      if (!this.phone) {
        this.$message({
          message: "请输入电话号码",
          type: "warning"
        });
        return;
      }
      let url = "/config/put";
      let params = {
        key: "JM",
        val: this.phone
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          self.$message({
            message: "操作成功",
            type: "success"
          });
          self.dialogVisible2 = false;
          self.jmList();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tab {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  margin-right: 20px;
  // border: 1px solid #dfdfdf;
  border-bottom: none;
//   box-shadow: #000 2px 0 15px 1px;
box-shadow: 1px 4px 10px #888;
}
.tab img {
  width: 100%;
  height: 125px;
  display: block;
}
.bjian {
  text-align: center;
  background: #409eff;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.fxiang {
  text-align: center;
  font-weight: 700;
  color: #000;
  font-size: 16px;
  margin: 0;
  line-height: 40px;
}
.minh {
  height: 130px;
  overflow: hidden;
}
.yongjin {
  line-height: 40px;
  font-size: 15px;
}
.bjian {
  text-align: center;
  background: #409eff;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.bili div {
  position: relative;
  font-size: 15px;
}
.bili span {
  position: absolute;
  right: 10px;
  top: 25%;
}
.bili input {
  height: 30px;
  width: 90%;
  margin-bottom: 10px;
}
.yongjin {
  line-height: 40px;
  font-size: 15px;
  padding-left: 15px;
}
.yongssjin {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 100px;
}
.pbqian {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
</style>
